<template>
	<loading-page v-if="data.loading" :show-nav="true" :transparent="data.loadingTransparent" />
	<!-- header -->
	<view :style="{height:navHeight}">
		<s-nav v-model="data.keyword" :placeholder="searchPlaceholder" :showBack="false" :back="false" @search="search" @clear="clear" />
	</view>
	<!-- tabs -->
	<view class="tab">
		<v-tabs v-model="data.tabIndex" :tabs="data.tabList" color="#999" fontSize="32rpx" height="100rpx" :lineScale="0.3" lineHeight="4rpx" lineColor="#E1835B" paddingItem="0 30rpx" activeColor="#000" :bold="true" :lineAnimation="data.lineAnimation" @change="changeTab"></v-tabs>
	</view>
	<list-merchant ref="listRef" :keyword="data.keyword" :service="data.service" v-if="data.tabIndex==0" @loaded="loaded" />
	<list-service ref="listRef" :keyword="data.keyword" :service="data.service" v-if="data.tabIndex==1" @loaded="loaded" />
	<list-case ref="listRef" v-if="data.tabIndex==2" />
</template>
<script setup>
	import { ref, reactive, watch, defineComponent, computed } from 'vue';
	import { onLoad, onReady, onHide, onTabItemTap, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
	import listMerchant from './components/list-merchant.vue';
	import listService from './components/list-service.vue';
	import listCase from './components/list-case.vue';
	import config from '@/uni.config.js';
	defineComponent({
		listMerchant,
		listService,
		listCase
	});
	onReady(() => {
		data.loading = false;
		data.lineAnimation = true;
		uni.$on('moreDaniel', index => {
			data.tabIndex = index;
		})
	});
	onLoad((options) => {
		const tab = options.tab;
		data.tabIndex = tab ? tab : 0;
		if (options.keyword) {
			data.keyword = options.keyword;
		} else if (options.service) {
			data.service = { type: 'service', ...JSON.parse(options.service) };
		}
	});
	onHide(() => {
		uni.$emit('CLOSESERVICEPOPUP');
	});
	onTabItemTap(() => {
		if (data.loadingTransparent) {
			data.loading = true;
			listRef.value.init(false);
		}
	});
	onReachBottom(() => {
		listRef.value.reachBottom();
	});
	onPageScroll(() => {
		uni.$emit('pageScroll');
	});
	const listRef = ref(null);
	const navHeight = computed(() => {
		return `${getApp().globalData.navHeight}px`;
	});
	const searchPlaceholder = computed(() => {
		return data.tabIndex == 0 ? `${config.title}-行业大牛任你搜` : `${config.title}-知识服务任你搜`;
	});
	const data = reactive({
		loading: true,
		loadingTransparent: false,
		tabIndex: -1,
		tabList: ['行业大牛', '服务'],
		lineAnimation: false,
		keyword: '',
		service: {}
	});
	// 切换tab
	function changeTab(e) {
		data.tabIndex = e;
		data.service = { type: 'service', name: '全部分类', value: 'all' };
	}
	// 清除搜索
	function clear() {
		listRef.value.search({ type: 'keywords', value: '' });
	}
	// 点击搜索框
	function search() {
		uni.navigateTo({
			url: `/subpages/search/search?keyword=${data.keyword}&tab=${data.tabIndex}&from=find`
		})
	}
	// 数据加载完成回调
	function loaded() {
		data.loading = false;
		data.loadingTransparent = true;
	}
</script>
<style lang="scss">
	@import '@/common/css/base.scss';
	page {
		background-color: $bgColor;
	}
</style>
